<script lang="tsx" setup>
import { ref } from 'vue';
import { ElCheckbox, ElLink, ElUpload } from 'element-plus';
import { downloadUserTemplate, uploadUserTemplate } from '@/service/api';
import { localStg } from '@/utils/storage';

const uploadRef = ref(null);
const updateSupport = ref(false);
const fileList = ref([]);

interface Emits {
  (e: 'success'): void;
}
const emit = defineEmits<Emits>();

function uploadData() {
  uploadUserTemplate(updateSupport.value ? 1 : 0, fileList.value).then(({ data, error, msg }) => {
    if (!error) {
      window.$message?.success(msg);
      emit('success');
    }
  });
}

defineExpose({
  uploadData
});
</script>

<template>
  <ElUpload ref="uploadRef" v-model:file-list="fileList" :limit="1" accept=".xlsx, .xls" :auto-upload="false" drag>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip text-center">
        <div slot="tip" class="el-upload__tip">
          <ElCheckbox v-model="updateSupport" />
          是否更新已经存在的用户数据
        </div>
        <span>仅允许导入xls、xlsx格式文件。</span>
        <ElLink
          type="primary"
          :underline="false"
          style="font-size: 12px; vertical-align: baseline; color: #646cff"
          @click="downloadUserTemplate"
        >
          下载模板
        </ElLink>
      </div>
    </template>
  </ElUpload>
</template>

<style>
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #646cff;
  border-color: #646cff;
}

.el-checkbox__inner {
  width: 16px;
  height: 16px;
  text-align: center;
}
</style>
